<template>
    <div class="multiterm-active-container" :class="{active: active, noActive: !active}">
        <div v-for="item in resize" v-show="active" :class="item.handle" class="resizable-handler" :style="{cursor: item.direction}"></div>
        <div v-for="item in resize" v-show="active" :class="item.handle" class="square"></div>
    </div>
</template>

<script lang="ts">
import { Component, Vue, Watch, Emit } from 'vue-property-decorator'

interface resize{
    handle: string;
    direction: string;
}
@Component({
    props: {
        active: Boolean,
    }
})
export default class MultitermActiveContainer extends Vue {
    resize: resize[] = [
        {
            handle: 't',
            direction: 'n-resize'
        },
        {
            handle: 'b',
            direction: 's-resize'
        },
        {
            handle: 'r',
            direction: 'e-resize'
        },
        {
            handle: 'l',
            direction: 'w-resize'
        },
        {
            handle: 'tr',
            direction: 'ne-resize'
        },
        {
            handle: 'tl',
            direction: 'nw-resize'
        },
        {
            handle: 'br',
            direction: 'se-resize'
        },
        {
            handle: 'bl',
            direction: 'sw-resize'
        }
    ]
    componentPressStauts: boolean = false
}
</script>

<style lang="less">
@import '../../styles/variables.less';

@handle-size: 7px;
@square-size: 5px;
.multiterm-active-container {
    position: absolute;
    &.noActive {
        &:hover {
            outline: 2px solid #0093dd;
        }
    }
    &.active {
        outline: 2px solid #0093dd;
    }
    .t, .b {
        left: 50%;    
    }
    .l, .r {
        top: 50%;
    }
    .resizable-handler {
        position: absolute;
        width: 14px;
        height: 14px;
        z-index: 1;
        &.t {
            top: -@handle-size;
            margin-left: -@handle-size;
        }
        &.b {
            bottom: -@handle-size;
            margin-left: -@handle-size;
        }
        &.l {
            margin-top: -@handle-size;
            right: -@handle-size;
        }
        &.r {
            margin-top: -@handle-size;
            left: -@handle-size;
        }
        &.tr {
            top: -@handle-size;
            right: -@handle-size;
        }
        &.tl {
            top: -@handle-size;
            left: -@handle-size;
        }
        &.br {
            bottom: -@handle-size;
            right: -@handle-size;
        }
        &.bl {
            bottom: -@handle-size;
            left: -@handle-size;
        }
    }
    .square {
        position: absolute;
        width: 7px;
        height: 7px;
        background: #fff;
        border: 1px solid @primary-color;
        border-radius: 1px;
        &.t {
            top: -@square-size;
            margin-left: -@square-size;
        }
        &.b {
            bottom: -@square-size;
            margin-left: -@square-size;
        }
        &.l {
            margin-top: -@square-size;
            right: -@square-size;
        }
        &.r {
            margin-top: -@square-size;
            left: -@square-size;
        }
        &.tr {
            top: -@square-size;
            right: -@square-size;
        }
        &.tl {
            top: -@square-size;
            left: -@square-size;
        }
        &.br {
            bottom: -@square-size;
            right: -@square-size;
        }
        &.bl {
            bottom: -@square-size;
            left: -@square-size;
        }
    }
}
</style>

